import React from "react";
import { Layout } from "antd";
import "./index.scss";
import { LogoutOutlined } from "@ant-design/icons";
import { Menu } from 'antd';
import { Link, Outlet  } from "react-router-dom"
import { useNavigate } from "react-router-dom"

const { Header, Sider, Content } = Layout;
const Home = () => {
  //侧边栏数据
  const items = [
    { label:<Link to="/home/overView">总览</Link> , key: "overView" }, // 菜单项务必填写 key
    {
      label: '流调管理',
      key: "currentModulation",
      children: [
        { label: <Link to="/home/CurrentModulation/Corroboration">确诊病例管理</Link>, key: "Corroboration" },
        { label: <Link to="/home/CurrentModulation/TightJoint">密接人员管理</Link>, key: "TightJoint" },
      ],
    },
    {
      label: <Link to="/home/command">指挥调度</Link>,
      key: "command",
    },
    {
      label: <Link to="/home/abnormal">异常警告</Link>,
      key: "abnormal",
    },
    {
      label:'居家监测' ,
      key: "homeTest",
      children: [
        { label: <Link to="/home/HomeTest/NeedTo">每日待办</Link>, key: "NeedTo" },
        { label:<Link to="/home/HomeTest/NewAdd">每日新增</Link> , key: "NewAdd" },
        { label: <Link to="/home/HomeTest/Abnormal">每日异常</Link>, key: "Abnormal" },
        { label: <Link to="/home/HomeTest/Testing">居家检测</Link>, key: "Testing" },
      ],
    },
    {
      label: <Link to="/home/noitce">通知公告</Link>,
      key: "noitce",
    },
    {
      label: '统计分析',
      key: "statistics",
      children: [
        { label:<Link to="/home/Statistics/Information">信息登记统计表</Link> , key: "Information" },
        { label:<Link to="/home/Statistics/TightJointPeo">密接人群分析表</Link> , key: "TightJointPeo" },
        { label:<Link to="/home/Statistics/AbnormalErr">异常警告统计表</Link> , key: "AbnormalErr" },
      ],
    },
    {
      label: '设置',
      key: "setUp",
      children: [
        { label:<Link to="/home/setUp/Organization">组织管理</Link> , key: "Organization" },
        { label: <Link to="/home/setUp/Account">账号管理</Link>, key: "Account" },
        { label: <Link to="/home/setUp/Role">角色管理</Link>, key: "Role" },
        { label: <Link to="/home/setUp/Journal">系统日志</Link>, key: "Journal" },
        { label:<Link to="/home/setUp/Data">数字字典管理</Link> , key: "Data" },
        { label: <Link to="/home/setUp/System">系统设置</Link>, key: "System" },
      ],
    },
  ];
  //退出
  const navigate = useNavigate()

  const exit=()=>{
    navigate('/')
    sessionStorage.clear()
  }
  return (
    <Layout className="home">
      <Header className="header">
        <div className="headerbox">
          <div className="title">
            <h1>新冠肺炎流调系统</h1>
          </div>
          <span>成都市疾控中心</span>
        </div>
        <div className="exit">
          <img
            src="https://img2.woyaogexing.com/2022/12/03/3135ff5b7b976ae1e25a61511a48d7b9.jpeg"
            alt="失效"
          />
          <span>市长</span>
          <LogoutOutlined className="icon" title="退出" onClick={exit}/>
        </div>
      </Header>
      <Layout>
        <Sider className="sider">
          <Menu
            style={{ width: 200 }}
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            mode="inline"
            items={items}
          />
        </Sider>
        <Content className="content">
          <Outlet/>
        </Content>
      </Layout>
    </Layout>
  );
};
export default Home;
